<template>
  <div>
    <a-modal title="请回答问题，匹配项目类型" :visible="visible" @ok="handleOK" @cancel="handleCancel" width="70vw">
      <div class="questionStyle">
        <li v-for="(item, indexs) in questionListData" :key="indexs">
          <div class="question-content">
            <div>
              <span class="question-num">{{ item.orderNum }}</span>
              <h4>
                {{ item.question }}
              </h4>
            </div>
            <div class="question-detail">
              <!-- 单选题 -->
              <a-radio-group v-model="item.singleChoice" @change="questionChange(item)">
                <a-radio v-for="(i, v) in item.optionVoList" :key="v" :value="i.id">
                  {{ i.optionContent }}
                </a-radio>
              </a-radio-group>
            </div>
          </div>
        </li>
        <div>
            <span class="result-cls" v-if="msg==1">您的项目属于<span style="color:#f7a961">&nbsp;&nbsp;{{projectType}}类&nbsp;&nbsp;</span>,请确定是否立项</span>
            <span class="result-cls" v-if="msg==2">您的项目不符合立项条件，本次无法立项，请重新调整或者取消立项。</span>
        </div>
      </div>
    </a-modal>
  </div>
</template>

<script>
import Vue from 'vue'
import { getAction, getActionAsync, postAction } from '@/api/manage'
import { ACCESS_TOKEN, USER_NAME } from '@/store/mutation-types'
export default {
  components: {},
  computed: {},
  data() {
    return {
      questionListData: [],
      sourceQuestionListData: [],
      msg: 0,
      projectType: '',
      url: {
        getTypeQuestionList: '/mainData/valueTest/getTypeQuestionList',
      },
    }
  },
  props: {
    visible: {
      Type: Boolean,
      default: false,
    },
    projectClass: {
      Type: Number,
      default: 30,
    },
  },
  mounted() {
    this.initQuestions()
  },
  methods: {
    questionChange(item) {
      this.msg=0;
      //当前问题选项变化，清理后续问题
      var currIndex = 0
      for (var i = 0; i < this.questionListData.length; i++) {
        if (this.questionListData[i].id == item.id) {
          currIndex = i
        }
      }
      this.questionListData.splice(currIndex+1)
      var selOption = item.singleChoice
      var selVal = ''
      var jumpQuestionNum = ''
      item.optionVoList.forEach((option) => {
        if (selOption == option.id) {
          selVal = option.optionValue
          jumpQuestionNum = option.jumpQuestionNum
        }
      })
      if (selVal != null && selVal.trim().length > 0) {
        this.projectType = selVal;
        this.msg=1;
      } else {
        if (jumpQuestionNum == null || jumpQuestionNum.trim().length == 0) {
          this.msg=2;
        } else {
            this.sourceQuestionListData.forEach(ques=>{
                if(ques.questionNum==jumpQuestionNum){
                    this.questionListData.push(JSON.parse(JSON.stringify(ques)));
                }
            });
        }
      }
    },
    handleOK() {
      this.$emit('subTypeHandleOk', this.projectType)
    },
    handleCancel() {
      this.$emit('subTypeHandleOk', null)
    },
    initQuestions() {
      var vm = this
      getAction(this.url.getTypeQuestionList, { classCode: this.projectClass })
        .then((res) => {
          if (res.code == 200) {
            if (res.result == null || res.result.length == 0) {
              vm.$message.warning('该类型项目未配置项目类型问答题目，请联系管理员')
              return
            }
            vm.sourceQuestionListData = res.result
            vm.questionListData = [res.result[0]]
          } else {
            vm.$message.warning('加载项目类型失败:' + res.message)
          }
        })
        .catch((res) => {
          vm.$message.warning('加载项目类型问题异常:' + res.message)
        })
    },
  },
}
</script>


<style lang="less" scoped>
.result-cls{
    text-align: center;
    display:block;
    font-size:18px;
    font-weight:600
}
/deep/ span.ant-radio + *,
/deep/ .ant-checkbox + span {
  font-size: 16px;
  color: black;
}
/deep/ input,
button,
select,
optgroup,
textarea {
  font-size: 16px;
}
/deep/ .ant-radio-wrapper {
  margin-bottom: 10px;
  white-space: unset;
  display: flex;
  align-items: center;
  & /deep/.ant-radio-wrapper-checked {
    display: flow-root;
  }
  & /deep/.ant-radio {
    padding-top: 3px;
  }
}
.requiredColor {
  /deep/ &.ant-input {
    border-color: red;
  }
}
.questionStyle {
  padding: 10px 0;
  // margin-left:201px;
  > li {
    list-style: none;
    display: flex;
    min-width: 950px;
    background-color: #fff;
    padding: 1.5%;
    margin-bottom: 15px;
    border: 1px solid #ededed;
  }
  .btnBox {
    text-align: center;
    display: block;
    background: unset;
    border: unset;
    & /deep/ .ant-btn {
      border: unset;
      border-radius: unset;
      margin: 0 20px;
      width: 150px;
    }
    & /deep/ .ant-btn-primary {
      background-color: #24508c;
    }
  }
  .question-num {
    width: 25px;
    height: 25px;
    background-color: #48b685;
    border-radius: 50%;
    color: #fff;
    text-align: center;
    line-height: 25px;
    // margin-right: 10px;
    display: inline-block;
  }
  .question-content {
    line-height: 30px;
    width: 100%;
    h4 {
      font-size: 18px;
      margin-left: 10px;
      margin-bottom: 0;
      font-weight: 600;
      display: inline-block;
      i {
        font-style: normal;
        color: grey;
        display: inline-block;
        margin-left: 10px;
      }
    }
    /deep/ .ant-input-number {
      width: inherit;
      margin: 5px 0;
    }
    .question-detail {
      padding-left: 40px;

      /deep/ .ant-radio-group-default {
        display: flex;
      }
    }
    .question-atten {
      position: relative;
      margin: 8px 0;
      display: flex;
      // justify-content: center;
      align-items: center;
      line-height: 1;
      img {
        position: absolute;
        top: 3px;
        left: 0;
      }
      span {
        margin-left: 20px;
        // color: #b9b9b9;
        font-size: 14px;
        // white-space: nowrap;
        line-height: 1.5;
      }
    }
  }
}
/deep/ .ant-modal-content{
  border-radius: 15px;
}
/deep/ .ant-modal-title,/deep/ .ant-modal-footer{
  text-align: center;
}
/deep/ .ant-transfer-operation .ant-btn-primary{
  background-color: #f5f5f5 !important;
}
/deep/ .ant-modal-header{
  border-radius: 15px 15px 0 0;
  // background-image: linear-gradient(90deg, #15b1ff 0%,#1158c9 100%);
  background-color: #15b1ff;
}
/deep/ .ant-modal-title{
  color: #fff;
}
</style>